<template>
    <f7-page class="page-comment-list">
        <f7-navbar>
            <f7-nav-left back-link=" " sliding></f7-nav-left>
            <f7-nav-center></f7-nav-center>
            <f7-nav-right>
                <f7-icon fa="comment-o" class="i-with-badge comment-list-icon" color="red">
                    <f7-badge color="red">1034</f7-badge>
                </f7-icon>
            </f7-nav-right>
        </f7-navbar>
        <div class="main comment-list">
            <div class="tag tag-friend">好友评论</div>
            <ul>
                <li @click="$router.load({url: '/news/commentReplyList/'})">
                    <div class="block">
                        <div class="hd">
                            <div class="avatar">
                                <f7-link class="img-wrap">
                                    <img src="../../assets/images/test.jpg" alt="">
                                </f7-link>
                                <f7-icon fa="mars" color="blue"></f7-icon>
                                <!-- <f7-icon fa="venus"></f7-icon> -->
                            </div>
                            <div class="user-info">
                                <f7-link class="role">这是个很长很长很长的角色名字
                                    <f7-icon fa="user-secret"></f7-icon>
                                </f7-link>
                                <f7-link color="red">张大大</f7-link>
                            </div>
                        </div>
                        <div class="bd">不得不承认，我们需要更多这样认真发掘传统文化的人不得不承认，我们需要更多这样认真发掘传统文化的人</div>
                        <div class="ft clearfix">
                            <span class="date">08-29 21:56</span>
                            <f7-icon fa="thumbs-o-up">3560</f7-icon>
                        </div>
                    </div>
                </li>
            </ul>
            <div class="reply-list clearfix">
                <ul>
                    <li>
                        <div class="block">
                            <div class="hd">
                                <div class="avatar">
                                    <f7-link class="img-wrap">
                                        <img src="../../assets/images/test.jpg" alt="">
                                    </f7-link>
                                    <f7-icon fa="venus" color="pink"></f7-icon>
                                </div>
                                <div class="user-info">
                                    <f7-link color="red">林二二</f7-link> @楼主
                                    <span class="floor">1楼</span>
                                </div>
                            </div>
                            <div class="bd">爱我中华民国！！！</div>
                            <div class="ft clearfix">
                                <span class="date">08-29 21:56</span>
                                <f7-icon fa="thumbs-o-up">3560</f7-icon>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="block">
                            <div class="hd">
                                <div class="avatar">
                                    <f7-link class="img-wrap">
                                        <img src="../../assets/images/test.jpg" alt="">
                                    </f7-link>
                                    <f7-icon fa="venus" color="pink"></f7-icon>
                                </div>
                                <div class="user-info">
                                    <f7-link class="role">杜兰特的德兰特杜兰特的德兰特杜兰特的德兰特杜兰特的德兰特
                                        <f7-icon fa="user-secret"></f7-icon>
                                    </f7-link>
                                    <f7-link color="red">赵四强</f7-link> @1楼
                                    <span class="floor">2楼</span>
                                </div>
                            </div>
                            <div class="bd">不得不承认，我们需要更多这样认真发掘传统文化的人不得不承认，我们需要更多这样认真发掘传统文化的人</div>
                            <div class="ft clearfix">
                                <span class="date">08-29 21:56</span>
                                <f7-icon fa="thumbs-o-up">3560</f7-icon>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="block">
                            <div class="hd">
                                <div class="avatar">
                                    <f7-link class="img-wrap">
                                        <img src="../../assets/images/test.jpg" alt="">
                                    </f7-link>
                                    <f7-icon fa="mars" color="blue"></f7-icon>
                                    <!-- <f7-icon fa="venus"></f7-icon> -->
                                </div>
                                <div class="user-info">
                                    <f7-link class="role">杜兰特的德兰特杜兰特的德兰特杜兰特的德兰特杜兰特的德兰特
                                        <f7-icon fa="user-secret"></f7-icon>
                                    </f7-link>
                                    <f7-link color="red">张大大</f7-link> @1楼
                                    <span class="floor">3楼</span>
                                </div>
                            </div>
                            <div class="bd">不得不承认，我们需要更多这样认真发掘传统文化的人不得不承认，我们需要更多这样认真发掘传统文化的人</div>
                            <div class="ft clearfix">
                                <span class="date">08-29 21:56</span>
                                <f7-icon fa="thumbs-o-up">3560</f7-icon>
                            </div>
                        </div>
                    </li>
                </ul>
                <f7-link class="more">30条叨叨>></f7-link>
            </div>
            <div class="reply-list reply-line clearfix">
                <ul>
                    <li>
                        <div class="block">
                            <div class="hd">
                                <div class="avatar">
                                    <f7-link class="img-wrap">
                                        <img src="../../assets/images/test.jpg" alt="">
                                    </f7-link>
                                    <f7-icon fa="venus" color="pink"></f7-icon>
                                </div>
                                <div class="user-info">
                                    <f7-link color="red">林二二</f7-link> @楼主
                                    <span class="floor">1楼</span>
                                </div>
                            </div>
                            <div class="bd">爱我中华民国！！！</div>
                            <div class="ft clearfix">
                                <span class="date">08-29 21:56</span>
                                <f7-icon fa="thumbs-o-up">3560</f7-icon>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="block">
                            <div class="hd">
                                <div class="avatar">
                                    <f7-link class="img-wrap">
                                        <img src="../../assets/images/test.jpg" alt="">
                                    </f7-link>
                                    <f7-icon fa="mars" color="blue"></f7-icon>
                                </div>
                                <div class="user-info">
                                    <f7-link class="role">杜兰特的德兰特杜兰特的德兰特杜兰特的德兰特杜兰特的德兰特
                                        <f7-icon fa="user-secret"></f7-icon>
                                    </f7-link>
                                    <f7-link color="red">赵四强</f7-link> @1楼
                                    <span class="floor">2楼</span>
                                </div>
                            </div>
                            <div class="bd">不得不承认，我们需要更多这样认真发掘传统文化的人不得不承认，我们需要更多这样认真发掘传统文化的人</div>
                            <div class="ft clearfix">
                                <span class="date">08-29 21:56</span>
                                <f7-icon fa="thumbs-o-up">3560</f7-icon>
                            </div>
                        </div>
                    </li>
                </ul>
                <f7-link class="more">30条叨叨>></f7-link>
            </div>

            <div class="tag tag-internet">网友评论</div>
            <ul>
                <li @click="$router.load({url: '/news/commentReplyList/'})">
                    <div class="block">
                        <div class="hd">
                            <div class="avatar">
                                <f7-link class="img-wrap">
                                    <img src="../../assets/images/test.jpg" alt="">
                                </f7-link>
                                <f7-icon fa="mars" color="blue"></f7-icon>
                                <!-- <f7-icon fa="venus"></f7-icon> -->
                            </div>
                            <div class="user-info">
                                <f7-link class="role">角色名字我看着还不错
                                    <f7-icon fa="user-secret"></f7-icon>
                                </f7-link>
                            </div>
                        </div>
                        <div class="bd">不得不承认，我们需要更多这样认真发掘传统文化的人不得不承认，我们需要更多这样认真发掘传统文化的人</div>
                        <div class="ft clearfix">
                            <span class="date">08-29 21:56</span>
                            <f7-icon fa="thumbs-o-up">3560</f7-icon>
                        </div>
                    </div>
                </li>
            </ul>
            <div class="reply-list clearfix">
                <ul>
                    <li>
                        <div class="block">
                            <div class="hd">
                                <div class="avatar">
                                    <f7-link class="img-wrap">
                                        <img src="../../assets/images/test.jpg" alt="">
                                    </f7-link>
                                    <f7-icon fa="mars" color="blue"></f7-icon>
                                </div>
                                <div class="user-info">
                                    <f7-link color="blue">角色名</f7-link> @楼主
                                    <span class="floor">1楼</span>
                                </div>
                            </div>
                            <div class="bd">爱我中华民国！！！</div>
                            <div class="ft clearfix">
                                <span class="date">08-29 21:56</span>
                                <f7-icon fa="thumbs-o-up">3560</f7-icon>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="block">
                            <div class="hd">
                                <div class="avatar">
                                    <f7-link class="img-wrap">
                                        <img src="../../assets/images/test.jpg" alt="">
                                    </f7-link>
                                    <f7-icon fa="venus" color="pink"></f7-icon>
                                </div>
                                <div class="user-info">
                                    <f7-link class="role">杜兰特的德兰特杜兰特的德兰特杜兰特的德兰特杜兰特的德兰特
                                        <f7-icon fa="user-secret"></f7-icon>
                                    </f7-link>
                                    <f7-link color="red">赵四强</f7-link> @1楼
                                    <span class="floor">2楼</span>
                                </div>
                            </div>
                            <div class="bd">不得不承认，我们需要更多这样认真发掘传统文化的人不得不承认，我们需要更多这样认真发掘传统文化的人</div>
                            <div class="ft clearfix">
                                <span class="date">08-29 21:56</span>
                                <f7-icon fa="thumbs-o-up">3560</f7-icon>
                            </div>
                        </div>
                    </li>
                </ul>
                <f7-link class="more">68条叨叨>></f7-link>
            </div>

            <ul>
                <li @click="$router.load({url: '/news/commentReplyList/'})">
                    <div class="block">
                        <div class="hd">
                            <div class="avatar">
                                <f7-link class="img-wrap">
                                    <img src="../../assets/images/test.jpg" alt="">
                                </f7-link>
                                <f7-icon fa="mars" color="blue"></f7-icon>
                                <!-- <f7-icon fa="venus"></f7-icon> -->
                            </div>
                            <div class="user-info">
                                <f7-link class="role">角色名字我看着还不错
                                    <f7-icon fa="user-secret"></f7-icon>
                                </f7-link>
                            </div>
                        </div>
                        <div class="bd">不得不承认，我们需要更多这样认真发掘传统文化的人不得不承认，我们需要更多这样认真发掘传统文化的人</div>
                        <div class="ft clearfix">
                            <span class="date">08-29 21:56</span>
                            <f7-icon fa="thumbs-o-up">3560</f7-icon>
                        </div>
                    </div>
                </li>
            </ul>
            <div class="reply-list clearfix">
                <ul>
                    <li>
                        <div class="block">
                            <div class="hd">
                                <div class="avatar">
                                    <f7-link class="img-wrap">
                                        <img src="../../assets/images/test.jpg" alt="">
                                    </f7-link>
                                    <f7-icon fa="mars" color="blue"></f7-icon>
                                </div>
                                <div class="user-info">
                                    <f7-link color="blue">角色名</f7-link> @楼主
                                    <span class="floor">1楼</span>
                                </div>
                            </div>
                            <div class="bd">爱我中华民国！！！</div>
                            <div class="ft clearfix">
                                <span class="date">08-29 21:56</span>
                                <f7-icon fa="thumbs-o-up">3560</f7-icon>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="block">
                            <div class="hd">
                                <div class="avatar">
                                    <f7-link class="img-wrap">
                                        <img src="../../assets/images/test.jpg" alt="">
                                    </f7-link>
                                    <f7-icon fa="venus" color="pink"></f7-icon>
                                </div>
                                <div class="user-info">
                                    <f7-link class="role">杜兰特的德兰特杜兰特的德兰特杜兰特的德兰特杜兰特的德兰特</f7-link> @1楼
                                    <span class="floor">2楼</span>
                                </div>
                            </div>
                            <div class="bd">不得不承认，我们需要更多这样认真发掘传统文化的人不得不承认，我们需要更多这样认真发掘传统文化的人</div>
                            <div class="ft clearfix">
                                <span class="date">08-29 21:56</span>
                                <f7-icon fa="thumbs-o-up">3560</f7-icon>
                            </div>
                        </div>
                    </li>
                </ul>
                <f7-link class="more">68条叨叨>></f7-link>
            </div>

            <p class="load-more">
                <f7-link>查看更多>></f7-link>
            </p>
        </div>
        <f7-toolbar tabbar labels class="comment-toolbar">
            <div class="edit-comment">
                <f7-icon fa="pencil" color="red"></f7-icon>
                <f7-input type="text" placeholder="写评论" icon-f7="chat" @click="openEditComment" readonly/>
            </div>
            <div class="icon-wrap">
                <f7-icon fa="comment-o" class="i-with-badge" color="red">
                    <f7-badge color="red">1034</f7-badge>
                </f7-icon>
            </div>
        </f7-toolbar>
        <edit-comment :editCommentState="editCommentState" @closeEditComment="closeEditComment"></edit-comment>
    </f7-page>
</template>

<style lang="scss">
    @import "../../assets/css/common.scss";
    .navbar {
        .comment-list-icon {
            margin-right: 30px;
        }
    }

    .page-comment-list {
        .tabbar {
            .icon-wrap {
                -webkit-box-flex: 0.5;
                flex: 0.5;
                text-align: left;

                i {
                    display: inline-block;
                    margin-left: 10px;
                }
            }
        }
    }
</style>

<script>
    import editComment from './editComment.vue'
    export default {
        data() {
            return {
                editCommentState: false
            }
        },
        components: {
            editComment
        },
        methods: {
            openEditComment() {
                this.editCommentState = true
            },
            closeEditComment() {
                this.editCommentState = false
            }
        }
    };
</script>